<template>
    <div class="Hotside">
        <!-- <div class="hs_box">
            <h1>创建自己的洞健号</h1>
            <h2>和我们一起洞察健康</h2>
            <h3>
                <span>一键登录</span>
            </h3>
        </div> -->

        <div class="hs_search">
            <h1>搜索热词</h1>

            <ul class="hs_lisy">
                <li
                    v-for="(item, index) in hotList"
                    :key="index"
                    @click="searchTurn(item.keyword)"
                >
                    <span>{{ item.keyword }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { axiosGet } from '../server/axios';
export default {
    name: 'HotSide',
    props: {
        msg: String,
    },
    data() {
        return {
            list: [],
            hotList: [],
        };
    },
    mounted() {
        this.getHotSearch();
    },
    methods: {
        ...mapMutations(['changeSsearchVal']),
        searchTurn(e) {
            this.changeSsearchVal(e);
            this.$router.push('/Search');
        },
        // 获取热搜
        getHotSearch() {
            axiosGet('api/search_histories/hot', {}, (res) => {
                console.log(res);
                if (res.code != 'ok') {
                    this.$notify({
                        title: '警告',
                        message: res.msg,
                        type: 'warning',
                    });
                }
                this.hotList = res.data;
            });
        },
    },
};
</script>
<style scoped lang="scss">
.hs_box {
    width: 410px;
    height: 180px;
    background: #ffffff;
    border-radius: 4px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h1 {
        font-size: 20px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #231815;
    }

    h2 {
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #787878;
        margin: 11px auto 24px;
    }

    h3 {
        width: 81px;
        height: 39px;
        border: 1px solid #e60012;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #e60012;
        cursor: pointer;
    }

    h3:hover {
        background: #fef0f3;
    }
}

.hs_search {
    margin: 20px auto 20px;
    overflow: hidden;

    background: #ffffff;
    border-radius: 4px;

    h1 {
        font-size: 18px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #231815;
        padding: 20px;
    }

    ul {
        padding: 0 20px;
        li {
            float: left;
            background: #fafafa;
            padding: 12px 15px;
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #787878;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            margin-bottom: 20px;
            cursor: pointer;
        }
    }
}
</style>
